<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="router-view" />
    </transition>
    <div style="height: 2.2rem;"></div>
    <TarBar v-show="isShowNav"></TarBar>
  </div>
</template>
<script>
import TarBar from "./components/TarBar.vue";
export default{
  components:{
    TarBar
  },
  data(){
return{
  isShowNav:true,
  transitionName: 'slide-left'
}
  },
    watch: {
    $route: function (val) {
      this.isShowNav = val.meta.isShowNav;
    },
}}
</script>
<style lang="less">
// #app{
//   width: 100%;
//   height: 100%;
// }
.router-view{
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active{
    height: 100%;
    will-change: transform;
    transition: all 500ms;
    position: absolute;
    backface-visibility: hidden;
}
.slide-right-enter{
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-enter{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active{
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>
